<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<title>论坛</title>
<head>
    <meta charset="UTF-8">
    <style>
		#yc{
			width: 500px;
    		height: 100px;
			padding:40px;
			margin:0 auto;
			background-color:#ccc;
			background-color: rgba(254,219,207,0.5);
			border-radius: 15px 15px 15px 15px;


			}
		input{
			margin-left: 50px;
		}
        #tiezi{
            margin-bottom:10px;
        	height: auto;
        	padding: 50px;
        	background-color:#ccc;
			background-color: rgba(254,219,207,0.5);
			border-radius: 15px 15px 15px 15px;
			resize: vertical;
            /*文字自动换行*/
            word-wrap: break-word;
            word-break: normal;
        }
        #submit{
        	width: 50px;
        }
        body{
        	background: url(/static/背景图.jpg);
        	background-repeat:no-repeat;
        	background-size: 100% 100%;
            background-attachment: fixed;
        }
        .page{
            margin-left: 400px;
            border-radius: 7px;
            width: 71px;
        }
        #current_user{
            width:180px;
            height:100px;
            float:right;
        }
        #child_remark {
            margin-left:10px;
            margin-top: 20px;
        }
        /*回复按钮样式*/
        .reply{
            float:right;
            /*text-decoration:none*/
        }
        /*评论框样式*/
        .Remark{
            line-height: 40px;
            margin-left: 55px;
            /*文字自动换行*/
            word-wrap: break-word;
            word-break: normal;
        }
        /*.PublishTime {*/
        /*    float: right;*/
        /*    margin-left: 200px;*/
        /*}*/
        /*二级菜单样式 display设置为none 隐藏*/
        #current_user ul li {
            display: none;
            /*position: absolute;*/
            margin-top:10px;
            /*去除下划线*/
            text-decoration: none;
        }
        #current_user ul li a{
            /*去除下划线*/
            text-decoration: none;
        }
        /*当鼠标移动到时显示二级菜单*/
        #current_user:hover li {
            display: block;
            color: pink;
        }
        /*头像框样式*/
        .circleImg{
            border-radius: 100px;
            width:60px;
            height:60px;
            float: right;
        }
        /*评论时间样式*/
        .PublishTime{
            color: #808080;
            font-size: 12px;
            min-height: 1.6em;
        }
        .StarColor {
            float:right;
            color: lightcoral;
        }
        /*提示框样式*/
        .alert {
            display: none;
            position: fixed;
            top: 0%;
            left: 45%;
            min-width: 200px;
            margin-left: -100px;
            z-index: 99999;
            padding: 15px;
            border: 1px solid transparent;
            border-radius: 4px;
        }
        /*操作成功提示框样式*/
        .alert-success {
            color: #3c763d;
            background-color: #dff0d8;
            border-color: #d6e9c6;
        }
        /*翻页UI样式*/
        .pageList{
            text-align: center;
        }
        ul.pagination {
            display: inline-block;
            padding: 0;
            margin: 0 auto;
        }
        ul.pagination li {display: inline;}

        ul.pagination li a {
            color: black;
            float: left;
            padding: 8px 16px;
            text-decoration: none;
        }
        ul.pagination li a.active {
            background-color: #4CAF50;
            color: white;
        }

        ul.pagination li a:hover:not(.active) {background-color: #ddd;}
        .pagination a {
            transition: background-color .3s;
            border: 1px solid #ddd;
            margin: 0 4px; /* 上下外边距为 0，可灵活修改 */
        }
        /*翻页UI*/

        /*点赞样式*/
        label {
            display: flex;
            float: right;
            align-items: center;
            /*padding: 10px 15px 10px 10px;*/
            cursor: pointer;
            user-select: none;
            border-radius: 10px;
            box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
            color: black;
            margin-right: 10px;
        }
        .svg1{
            fill: none;
            stroke: currentColor;
        }
        .svg2 {
            fill: hsl(0deg 100% 50%);
            stroke: hsl(0deg 100% 50%);
            animation: heartButton 1s;
        }
        /*点赞样式*/
	</style>
</head>
<body>
<div id='sent'>
    <!-- 头像上传按键 已被隐藏   -->
    <input type="file" accept="image/*" id="upload" hidden>
</div>
    <img class="circleImg" id="pic" th:src="${headshotPath}"  />
    <!--当前用户显示 及当前用户操作二级菜单列表    -->
    <ul id="current_user">
        <a class="currentUser" th:text="'当前登录用户为：'+${current_user}"></a>
        <ul>
            <li><a onclick="Sign()">签到</a></li>
            <li><a href="http://localhost:8071/quit">注销用户</a></li>
        </ul>
    </ul>
    <div id='yc'>
        <textarea id="publish" rows="6" cols="50"onpropertychange="if(this.scrollHeight>80)this.style.posHeight=this.scrollHeight+5">请输入要发布的内容</textarea>
        <br />
        <input type="submit" id="submit" value="发布" onclick="publish()"/>
    </div>
</div>
<!--fragment 局部刷新属性-->
<div id="frame" th:fragment="frame">
    <HR style="FILTER:alpha(opacity=100,finishopacity=0,style=3)" width="80%" color=#987cb9 SIZE=3>
    <div id="tiezi" th:each="tiezi : ${tiezi_list}" >
        <a>用户名:</a><a th:text="*{tiezi.user}"></a>
        <a th:text="'发布时间:'+*{tiezi.PublishTime}"} style="margin-left: 50px;float: right"></a>
        <br /><br />
        <!-- 帖子内容-->
        <div id="content" th:utext="*{tiezi.content}"></div>
        <!--拼接调用js函数，将帖子ID传到js函数中进行帖子的显示与隐藏处理    -->
        <a class="reply"  th:onclick="'showAndhide('+*{tiezi.ID}+');'">评论</a>
        <!-- 点赞UI 根据点赞内容改变样式 未点赞->svg1样式 已经点赞->svg2样式       -->
        <label class="label">
            <svg th:onclick="'Star('+*{tiezi.ID}+');'" th:class="*{tiezi.starStatu}?'svg2':'svg1'" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-heart"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path></svg>
            <a th:text="*{tiezi.starNum}"></a>
        </label>
        <br /><br />
        <HR style="FILTER:alpha(opacity=100,finishopacity=0,style=3)" width="80%"color=#987cb9 SIZE=3>
        <div th:each="Remark : ${remark_list} " >
            <div class="Remark">
                <!--根评论输出        -->
                <!--th:if="*{tiezi.ID eq Remark.ParentID}" 设置条件:当帖子ID和评论对应时进行输出        -->
                <a  th:if="*{tiezi.ID eq Remark.ParentID}" th:utext="'用户'+*{Remark.User}+'回复'+*{tiezi.user}+'的评论：'+*{Remark.Text}"></a>
                <a th:if="*{tiezi.ID eq Remark.ParentID}" th:utext="*{'发布时间:'+Remark.PublishTime}" class="PublishTime"></a>
                <!--拼接调用js函数，将帖子ID传到js函数中进行帖子的显示与隐藏处理    -->
                <a class="reply" th:onclick="'showAndhide('+*{Remark.ID}+');'" th:if="*{tiezi.ID eq Remark.ParentID}">回复</a>
            </div>
            <!--初次调用子评论递归块   row传入三个参数依次为父帖用户名、父帖孩子列表、左边距宽度 -->
            <tbody th:if="*{tiezi.ID eq Remark.ParentID}" th:include="this::row(*{Remark.User},*{Remark.child_List},55)" />
            <!--递归调用子评论递归块    row接收三个参数依次为父帖用户名、父帖孩子列表、左边距宽度 -->
            <th:block th:fragment="row(parentUser,child_List,marginleft)">
                <div th:each="child : ${child_List}">
                    <div class="child_remark">
                        <a id="child_remark" class="Remark" th:utext="'用户'+*{child.User}+'回复'+${parentUser}+'的评论：'+*{child.Text}" th:style="'margin-left:'+${marginleft+50}+'px'"></a>
                        <a th:text="*{'发布时间:'+child.PublishTime}" class="PublishTime"></a>
                        <!--   通过点击调用showAndhide显示输入框并且将ID传到后台js中     -->
                        <a class="reply"  th:onclick="'showAndhide('+*{child.ID}+');'">回复</a><br>
                    </div>
                    <!--  开始递归调用      -->
                    <th:block th:unless="*{#lists.isEmpty(child.Child_List)}" th:include="this::row(${child.User},${child.Child_List},${marginleft+50})"/>
                </div>
            </th:block>
        </div>
        <HR>
    </div>
</div>


<!--<input type="button" id="top_page" class="page" value="上一页" onclick="top_page();">-->
<!--<input type="button" id="next_page" class="page" value="下一页" onclick="next_page();">-->
<div class="pageList">
    <ul class="pagination" id="pagination"></ul>
</div>

<script src="/static/jquery-3.1.1.min.js"></script>
<script src="/templates/luntan.js"></script>
<script src="/templates/loginManage.js"></script>
</body>
</html>